<template>
   
<div class="wholescreen" >

   <el-row :gutter="20">
     <el-col :span="4"  >
         
             <el-row :gutter="10">
                
                <el-col :span="24"  style="overflow:auto;height:550px;">
                  <ProjectTree :onObjectNodeClick="onObjectNodeClick">

                  </ProjectTree>
     		    </el-col>
     		 </el-row>
         
     </el-col>

     <el-col :span="20" >
          <el-tabs v-model="currentTab" type="border-card" closable @tab-remove="removeTab">
               <el-tab-pane
                    v-for="(item, index) in showTabs.filter((v,i)=>{return v.isShow==1})"
                       :label="item.title"
                       :name="item.name"
					   :resourceId ="item.resourceId"
                  >
				<template  v-if="  item.tabType=='RESOURCE'  && item.isShow==1    ">
				      <PropertySheet  :sheetId="item.resourceId"  sheetType="RESOURCE" >
					  </PropertySheet>
				</template>  
				<template  v-if="  item.tabType=='MODEL'  && item.isShow==1    ">
				      <EditModelPanel  :modelId="item.modelId"  >
					  </EditModelPanel>
				</template> 
				<template  v-if=" ( item.tabType=='FLOW' || item.tabType=='TEST')  && item.isShow==1    ">
				    <EditFlowPanel :flowId="item.flowId">
					</EditFlowPanel>
			    </template>  		
               </el-tab-pane>
          </el-tabs>
     </el-col>
    </el-row>
   </div>
</template>

<script>

    import Vue from 'vue';
   
    import {Col,Row ,Card,Tabs,TabPane} from 'element-ui'
	Vue.component(Col.name, Col)
	Vue.component(Row.name, Row)
	Vue.component(Card.name, Card)
	Vue.component(Tabs.name, Tabs)
	Vue.component(TabPane.name, TabPane)
	
	import 'element-ui/lib/theme-default/icon.css';
	import 'element-ui/lib/theme-default/row.css';
	import 'element-ui/lib/theme-default/col.css';
	import 'element-ui/lib/theme-default/card.css';
	import 'element-ui/lib/theme-default/tabs.css';
	import 'element-ui/lib/theme-default/tab-pane.css';
	
	import ProjectTree from './ProjectTree.vue'
	import PropertySheet from './PropertySheet.vue'
	import EditModelPanel from './EditModelPanel.vue'
	import EditFlowPanel from './EditFlowPanel.vue'
    
	
	
    export default {
        data () {
            return {
				  showTabs:[],
				  currentTab :null,
				  tabIndex:0
            }
        },
		components:{ProjectTree,PropertySheet,EditModelPanel,EditFlowPanel},
        mounted() {
			
			
        }
		,methods:{

                
		     onObjectNodeClick(obj ,node ,self){
				    var o=null;
				    if(node.data.nodeType=='RESOURCE'){
						o={
							  title :node.data.Name,
							  name : (this.tabIndex++).toString(),
							  tabType :"RESOURCE",
							  isShow :1,
							  resourceId :node.data.Id,
							   objectId :node.data.Id
						};
					}
					if(node.data.nodeType=='MODEL'){
						o={
							  title :node.data.Name,
							  name : (this.tabIndex++).toString(),
							  tabType :"MODEL",
							  isShow :1,
							  modelId :node.data.Id,
							   objectId :node.data.Id
						};
					}
					if(node.data.nodeType=='FLOW'  ||  node.data.nodeType=='TEST'){
						o={
							  title :node.data.Name,
							  name : (this.tabIndex++).toString(),
							  tabType :node.data.nodeType,
							  isShow :1,
							  flowId :node.data.Id,
							  objectId :node.data.Id
						};
					}
					if(o){
					 var m=0;
					 this.showTabs.forEach((tab, index) => {
							if(tab.objectId==node.data.Id  &&  tab.isShow ==1){
								m++;
								this.currentTab =tab.name
							}
				     });
					 if(m==0){
						    this.showTabs.push(o);
							this.currentTab =o.name
					 }
					}
						
			 },
			
			 removeTab(target) {
				   
				    
                    var activeName;
					
                    this.showTabs.forEach((tab, index) => {
						   console.log(index,target,index == target)
							if(index==target){
								this.showTabs[index].isShow=0
							}
							else{
								if(!activeName && tab.isShow==1){
									activeName =tab.name
								}
							}
				    });
					this.currentTab=activeName
				//	console.log(this.showTabs)
			 }


		}
    }
</script>

<style>
.wholescreen{
  width:95%;
}
.tree-wrapper{
  width:100%;
  height:400px;
  overflow:auto !important;
}

</style>